<template>
	<view>
		<view class="logo">
			<u--image width="80px" height="80px" :src="require('static/jqr-128.png')" shape="circle"></u--image>
		</view>
		<view class="login-main">
			<u--form :model="user" :rules="rules" ref="form1">
				<u-form-item prop="userName" borderBottom>
					<u--input v-model="user.userName" placeholder="请输入账号" border="none" prefixIcon="account"
						prefixIconStyle="font-size: 22px;color: #909399"></u--input>
				</u-form-item>
				<u-form-item prop="password" borderBottom>
					<u--input placeholder="请输入密码" border="none" type="password" v-model="user.password" prefixIcon="lock"
						prefixIconStyle="font-size: 22px;color: #909399"></u--input>
				</u-form-item>
				
				<u-form-item borderBottom>
					<u-row>
						<u-col :span="span8">
							<u-form-item prop="verifyCode">
								<u--input placeholder="请输入验证码" border="none" v-model="user.verifyCode" prefixIcon="grid"
									prefixIconStyle="font-size: 22px;color: #909399"></u--input>
							</u-form-item>
						</u-col>
						<u-col :span="span4">
							<view class="code-img-wrapper" @click="updateImageCode">
								<canvas  style="width: 100px;height:60rpx;" canvas-id="canvas"></canvas>
							</view>
						</u-col>
					</u-row>
				</u-form-item>
				<u-button @click="btnLogin">用户登录</u-button>
			</u--form>
		</view>
		<view class="login-bars">
			<view class="register" @click="toRegister">用户注册</view>
			<view class="forget">忘记密码</view>
		</view>
	</view>
</template>

<script>
	import {
		mapMutations
	} from 'vuex';
	import {
		Mcaptcha
	} from '@/util/mcaptcha'
	export default {
		data() {
			return {
				span8:8,
				span4:4,
				user: {
					userName: '',
					password: '',
					verifyCode:''
				},
				rules: {
					userName: [{
						required: true,
						message: '请输入你的账户',
						trigger: ['blur']
					}],
					password: [{
						required: true,
						message: '请输入你的密码',
						trigger: ['blur']
					}],
					verifyCode:[
						{
							required: true,
							message: '请输入你的密码',
							trigger: ['blur']
						}
					]

				}
			}
		},
		onReady() {
			this.mcaptcha = new Mcaptcha({
				el: 'canvas',
				width: 100,
				height: 30,
				createCodeImg: ""
			});
		},
		onLoad() {

		},
		methods: {
			...mapMutations(['setUserInfo', 'setToken']),
			btnLogin() {
			this.$refs.form1.validate().then(async res => {	
				//验证码
				
				let validate = this.mcaptcha.validate(this.user.verifyCode)
				if (!validate) {
					return uni.showToast({
						title: '图形验证码错误'
					})
				} 
				
			    let result=await uni.$u.http.post('api/userinfo/login',this.user);
				if(result.success){
					this.setUserInfo(result.data.userinfo);
					this.setToken(result.data.userinfo.token)
					uni.$u.route({
						url:'/pages/user/index/index',
						type:'tab'
					})
				}
				else{
					
					return uni.$u.toast(result.msg)
				 }
				
				
				}).catch(errors => {
					uni.$u.toast('校验失败')
				})

			},
			toRegister() {
				uni.navigateTo({
					url: '/pages/index/register'
				})
			},
			updateImageCode(){
				this.mcaptcha.refresh()
			}
			
		}
	}
</script>

<style scoped>
	.logo {
		height: 150px;
		display: flex;
		justify-content: center;
		align-items: center;
		border-bottom: 1px solid #C8C9CC;

	}

	.leftIcon {
		color: red;
	}

	.logo u--image {
		height: 100px;
		height: 100px;
	}

	.login-main {
		margin: 0 10px;
	}

	.login-bars {
		width: 100%;
		display: flex;
		height: 30px;
		justify-content: space-around;
		align-items: center;
		font-size: 14px;
	}

	.login-bars .register {
		flex: 1;
		text-align: center;
		color: #C8C9CC;
	}

	.login-bars .forget {
		flex: 1;
		text-align: center;
		color: #C8C9CC;
	}
</style>
